class Enlarge
{
    constructor(el)
    {
        this.el=document.querySelector(el)
        this.img=this.el.querySelector('.img')
        this.mask=this.el.querySelector('.mask')
        this.enlarge=this.el.querySelector('.enlarge')

        //调用
        this.init()
    }
    init()
    {
        this.overOut()
        this.maskMove()
        this.enlargeWH()
        // this.tb()
        this.qh()
    }

    qh()
    {
        //获取所有li
        let liObjs=this.el.querySelectorAll('ul li')
        //遍历
        liObjs.forEach((item,i) =>{
        //给发生点击事件的li添加点击事件
        item.onclick=() =>{
        this.el.querySelector('ul li').imgName=''
        item.imgName='i'
        this.img.style.background=`url(./imgs/${i+1}.jpg`
        this.enlarge.style.background=`url(./imgs/${i+1}.big.jpg)`

        this.el.querySelector('ul li.active').className=''
        this.el.querySelector(`ul li:nth-of-type(${i+1})`).className='active'
        }
    })
    }

    tb(x,y)
    {
        let maskW =this.mask.offsetWidth
        let enlargeW = parseInt(this.enlarge.style.width)
        let data=enlargeW / maskW
        this.enlarge.style.backgroundPosition = `-${x*data}px -${y*data}px`

    }

    maskMove()
    {
        //获取放大镜里面的左侧图片
         //绑定移动事件
        this.img.onmousemove=(evt) => {
        let e=evt || window.event

        //在事件处理函数中-先获取鼠标位置
        let x = e.pageX-this.el.offsetLeft - this.mask.offsetWidth/2
        // let x = e.pageX-this.img.parentNode.offsetLeft - this.mask.offsetWidth/2

        let y = e.pageY - this.el.offsetTop - this.mask.offsetHeight/2
        // let y = e.pageY - this.img.parentNode.offsetTop - this.mask.offsetHeight/2

        if(x<0) x =0
        if(y<0) y =0

        let maxLeft=this.img.offsetWidth-this.mask.offsetWidth
        let maxTop=this.img.offsetHeight-this.mask.offsetHeight

        if(x>maxLeft) x = maxLeft
        if(y>maxTop) y = maxTop
        // console.log(this.img);
        //事件处理函数中-同步遮罩框left、top
        this.mask.style.left = x +'px'
        this.mask.style.top = y +'px'
        //事件处理函数中-同步放大镜坐标
        
        this.tb(x,y)
        }

      
    }

    getStyle(tagObj,cssAttr)
    {
        if (window.getComputedStyle){
            return getComputedStyle(tagObj)[cssAttr]
        }else{
            return tagObj.currentStyle[cssAttr]
        }
    }

    enlargeWH()
    {
        let temp =this.getStyle(this.enlarge,'background-size')
        let enlargeW=parseInt(temp.split(' ')[0])
        let enlargeH=parseInt(temp.split(' ')[1])

        let imgW=this.img.clientWidth
        let imgH=this.img.clientHeight

        let maskW =parseInt(this.getStyle(this.mask ,'width'))
        let maskH =parseInt(this.getStyle(this.mask ,'height'))
        // let maskH =this.mask.offsetHeight

        let w=maskW*(enlargeW/imgW)
        let H=maskH*(enlargeH/imgH)
        this.enlarge.style.width =w+'px'
        this.enlarge.style.Height =H+'px'
        // console.log(this.enlarge)
    }


    overOut()
    {
        this.img.onmouseover =() =>this.mask.style.display=this.enlarge.style.display='block'
        this.img.onmouseout =() =>this.mask.style.display=this.enlarge.style.display='none'
        
    }

}
export default Enlarge